<template>
    <!--wh-100 overflow-auto-->
    <div class="wh-100 overflow-auto-hidden">
        <div style="min-height: calc(100vh - 110px)" class="w-100 mt-20 mx-auto d-flex" v-loading="loading">
            <div ref="infoRef" class="flex-1 w_100-250p" style="background-color: #fff">
                <div class="wh-100">
                    <img src="../images/resume-bannger.png" width="100%" height="200px" class="vertical-align-top" />
                    <div class="w-100" style="height: calc(100% - 212px)">
                        <div class="w-100 px-48" style="transform: translateY(-60px)">
                            <div class="d-flex w-100 pb-12" style="border-bottom: 1px solid #f6f8fb">
<!--                                <img src="../images/profilePicture.png" style="border: 10px solid #fff" />-->
                                <div class="info-base-avatar ">
                                    <img v-if="baseMes.photo !== null && baseMes.photo" alt="" class="imageIcon" :src="baseMes.photo" />
                                    <div v-else class="wh-100">
                                        <img v-if="baseMes.sex === '女'"  src="../images/iconWoman.png" alt="" class="imageIcon" />
                                        <img v-if="baseMes.sex === '男'"  src="../images/iconMan.png" alt="" class="imageIcon" />
                                    </div>
                                </div>
                                <div class="w-100 ml-12">
                                    <!--姓名-->
                                    <div style="font-size: 36px; color: white">{{ baseMes.name ? baseMes.name : '姓名' }}</div>
                                    <div style="font-size: 14px" class="mt-20">
                                        基础信息：{{ baseMes.age ? baseMes.age + '岁 | ' : '' }}{{ baseMes.school ? baseMes.school + ' | ' : ''
                                        }}{{ baseMes.theyear ? baseMes.theyear + ' | ' : baseMes.theyear }}{{ baseMes.education ? baseMes.education + ' | ' : baseMes.education
                                        }}{{ baseMes.speciality ? baseMes.speciality : '' }}
                                    </div>
                                    <div style="font-size: 14px" class="mt-12">
                                        <span v-if="baseMes.nation">民族：{{ baseMes.nation }}</span>
                                        <span v-if="baseMes.politicalOutlook" class="ml-12">政治面貌：{{ baseMes.politicalOutlook }}</span>
                                        <span v-if="baseMes.place" class="ml-12">籍贯：{{ baseMes.place }}</span>
                                        <span v-if="baseMes.city" class="ml-12">所在城市：{{ baseMes.city }}</span>
                                    </div>
                                    <div class="d-flex-between-center w-100 mt-20">
                                        <div class="d-flex">
                                            <div
                                                v-if="baseMes.phone"
                                                class="d-flex-center mr-12"
                                                style="width: 150px; height: 40px; background-color: #e5f4fe; border: 1px solid #cbe9fd; border-radius: 20px"
                                            >
                                                <Icon color="#0294fa" type="ios-phone-portrait" />
                                                <!--                                                                                  手机号-->
                                                <span style="font-size: 14px; color: #0094fa" class="ml-8">{{ baseMes.phone }}</span>
                                            </div>
                                            <div
                                                v-if="baseMes.email"
                                                class="d-flex-center"
                                                style="min-width: 180px; height: 40px; background-color: #eff8ec; border: 1px solid #d1ebc8; border-radius: 20px"
                                            >
                                                <Icon type="ios-mail-outline" color="#87ca8c" />
                                                <!--                                                     邮箱-->
                                                <span style="font-size: 14px; color: #acd99a" class="ml-8">{{ baseMes.email }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--教育背景-->
                            <div class="label-title">
                                <span class="title" style="font-size: 16px; color: #1677ff">教育背景</span>
                            </div>
                            <div class="fs-14">
                                <!--  {{ baseMes.edBackA}}-->
                                <!--                                {{ baseMes.edBackA.split(" ")[0] }} - {{ baseMes.edBackA.split(" ")[2] }}-->
                                {{ baseMes.school ? baseMes.school + ' | ' : '' }}{{ baseMes.speciality ? baseMes.speciality + ' | ' : '' }}{{ baseMes.education ? baseMes.education : '' }}
                                <!--                  2020.03-2023.06 河南财经政法大学 ｜ 金融管理 ｜ 计算机应用技术 ｜ 本科-->
                            </div>
                            <!--求职期望-->
                            <div v-if="this.previewCatalog[3].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between">
                                    <span class="title" style="font-size: 16px; color: #1677ff">求职期望</span>
                                </div>
                                <div class="fs-14 pb-12" style="border-bottom: 1px solid #f6f8fb">
                                    <!--                                郑州 ｜ 证券/基金/期货 ｜ 行政/后勤类 ｜ 全职 ｜ 5k-6k ｜ 一周内-->
                                    <!--                              {{ this.baseMes.workPlace }} ｜ {{ this.baseMes.engagedIndustry }} ｜ {{ this.baseMes.positionHeld }} ｜ {{ this.baseMes.workType }} ｜ {{ this.baseMes.salaryRangeMin }}k-{{ this.baseMes.salaryRangeMax }}k ｜ {{ this.baseMes.onDate }}-->
                                    <template
                                        v-if="
                                            baseMes.workPlace &&
                                            baseMes.engagedIndustry &&
                                            baseMes.positionHeld &&
                                            baseMes.workType &&
                                            baseMes.salaryRangeMin &&
                                            baseMes.salaryRangeMax &&
                                            baseMes.onDate
                                        "
                                    >
                                        {{
                                            [
                                                baseMes.workPlace,
                                                baseMes.engagedIndustry,
                                                baseMes.positionHeld,
                                                baseMes.workType,
                                                baseMes.salaryRangeMin + 'k-' + baseMes.salaryRangeMax + 'k',
                                                baseMes.onDate
                                            ].join(' ｜ ')
                                        }}
                                    </template>
                                </div>
                            </div>

                            <!--项目经验-->
                            <div v-if="this.previewCatalog[4].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between">
                                    <span class="title" style="font-size: 16px; color: #1677ff; page-break-after: avoid">项目经验</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.projectExep }}</pre>
                            </div>
                            <!--技能专长-->
                            <div v-if="this.previewCatalog[5].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between">
                                    <span class="title" style="font-size: 16px; color: #1677ff; page-break-after: avoid">技能专长</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.skillExe }}</pre>
                            </div>
                            <!--实习经历-->
                            <div v-if="this.previewCatalog[6].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between" @click="showModel(5)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">实习经历</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.internshipExep }}</pre>
                            </div>
                            <!--获奖情况-->
                            <div v-if="this.previewCatalog[7].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between" @click="showModel(6)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">获奖情况</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.awardSss }}</pre>
                            </div>
                            <!--实践经验-->
                            <div v-if="this.previewCatalog[8].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between" @click="showModel(7)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">实践经验</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.practicalExep }}</pre>
                            </div>
                            <!--所获证书-->
                            <div v-if="this.previewCatalog[9].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between" @click="showModel(8)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">所获证书</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.certifiCation }}</pre>
                            </div>
                            <!--自我评价-->
                            <div v-if="this.previewCatalog[10].whetherToFillIn">
                                <div class="label-title mt-12 d-flex-between" @click="showModel(9)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">自我评价</span>
                                </div>
                                <pre style="max-width: 100%" class="fs-14">{{ baseMes.selfEvalua }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="printStatus" class="w-250" style=" margin-left: 12px; height: fit-content; position: sticky; top: 0">
                <!--打印简历-->
                <div @click="putASealOn" class="d-flex-center mt-20" style="width: 250px; height: 80px; border: 1px solid #edf1f7; cursor: pointer; background-color: #fff; border-radius: 4px">
                    <Icon type="ios-print-outline" />
                    <span class="ml-12 fs-16" style="color: #333">打印简历</span>
                </div>
                <!--简历目录-->
                <div class="mt-20 flex-1" style="background-color: #fff">
                    <div class="mb-20 resume-catalog d-flex align-items-center px-16">
                        <div style="border: 2px solid #fff; height: 25px; border-radius: 4px"></div>
                        <span style="color: #fff; font-size: 20px; margin-left: 16px">简历目录</span>
                    </div>
                    <!-- 步骤条-->
                    <div class="px-36">
                        <div
                            class="step-stick-active d-flex align-items-center"
                            :class="item.whetherToFillIn ? 'is-active' : ''"
                            v-for="item in resumeCatalog"
                            :key="item.name"
                            v-if="item.whetherToFillIn || showCatalog"
                        >
                            <div class="">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                    <!--更新时间&浏览次数-->
                    <div class="fs-12 p-20" style="border: 1px solid #f6f8fb">
                        <div>更新时间：{{ baseMes.updateTime ? baseMes.updateTime : '' }}</div>
                        <div>浏览次数：{{ baseMes.viewed ? baseMes.viewed + '次' : '' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Hearder from '@/views/personalCenter/personage-layout/components/personage-header.vue';
// 控制填写信息
const messageStatus = 0;
// 控制打印范围
const printStatus = true;

// region TODO 基本信息
const basicInformationForm = {
    gender: null,
    dateOfBirth: null,
    nation: '',
    politicsStatus: '',
    nativePlace: '',
    province: '',
    city: '',
    placeProvince: '',
    placeCity: '',
    phone: '',
    email: ''
};
//校验手机号
const checkPhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('手机号不能为空'));
    } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
            callback();
        } else {
            return callback(new Error('请输入正确的手机号'));
        }
    }
};
// 校验出生日期
const checkdateOfBirth = (rule, value, callback) => {
    if (basicInformationForm.dateOfBirth) {
        callback();
    } else {
        return callback(new Error('请输入出生日期'));
    }
};
const basicInformationFormRules = {
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    dateOfBirth: [{ validator: checkdateOfBirth, required: true, message: '请选择出生日期', trigger: 'blur' }],
    nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
    phone: [{ validator: checkPhone, required: true, message: '请输入正确的手机号', trigger: 'blur' }],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确邮箱', trigger: 'blur' }
    ]
};

// endregion

// region TODO 求职期望
const jobExpectationForm = {
    operationalField: '',
    engageInTheIndustry: '',
    takeUpAPosition: '',
    typeOfWork: '',
    payRangeStart: '',
    payRangeEnd: '',
    arrivalTime: '',
    statusOfJobSeeking: ''
};
// 薪酬范围校验
const remuneration = (rule, value, callback) => {
    if (jobExpectationForm.payRangeStart <= 0) {
        return callback(new Error('请输入薪酬范围'));
    } else if (jobExpectationForm.payRangeEnd <= 0) {
        return callback(new Error('请输入薪酬范围'));
    } else {
        callback();
    }
};

const jobExpectationRules = {
    operationalField: [
        {
            required: true,
            message: '请选择工作地区',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.operationalField.length > 0) {
                    callback();
                } else {
                    return callback(new Error('请选择工作地区'));
                }
            }
        }
    ],
    engageInTheIndustry: [
        {
            required: true,
            message: '请选择从事行业',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.engageInTheIndustry.length > 0) {
                    callback();
                } else {
                    return callback(new Error('请选择从事行业'));
                }
            }
        }
    ],
    takeUpAPosition: [
        {
            required: true,
            message: '请选择担任职位',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.takeUpAPosition.length > 0) {
                    callback();
                } else {
                    return callback(new Error('请选择担任职位'));
                }
            }
        }
    ],
    typeOfWork: [
        {
            required: true,
            message: '请选择工作类型',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.typeOfWork === '' || jobExpectationForm.typeOfWork === null) {
                    return callback(new Error('请选择工作类型'));
                } else {
                    callback();
                }
            }
        }
    ],
    payRange: [{ required: true, validator: remuneration, message: '请填写薪酬范围', trigger: 'blur' }],
    arrivalTime: [
        {
            required: true,
            message: '请选择到岗时间',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.arrivalTime === '' || jobExpectationForm.arrivalTime === null) {
                    return callback(new Error('请选择到岗时间'));
                } else {
                    callback();
                }
            }
        }
    ],
    statusOfJobSeeking: [
        {
            required: true,
            message: '请选择求职状态',
            trigger: 'change',
            validator(rule, value, callback) {
                if (jobExpectationForm.statusOfJobSeeking === '' || jobExpectationForm.statusOfJobSeeking === null) {
                    return callback(new Error('请选择求职状态'));
                } else {
                    callback();
                }
            }
        }
    ]
};
// endregion

// region TODO 项目经验
const projectExperience = '';
// endregion
// region TODO 技能专长
const skillAndExpertise = '';
// endregion
// region TODO 实习经历

const internshipExperience = '';
// endregion

// region TODO 获奖情况

const scholarshipAndPrize = '';
// endregion

// region TODO 实践经验

const practicalExperience = '';
// endregion

// region TODO 所获证书

const receivedCertificate = '';
// endregion

// region TODO 自我评价

const selfAssessment = '';
// endregion

// region TODO 简历目录
const resumeCatalog = [
    { name: '个人信息', whetherToFillIn: false },
    { name: '联系方式', whetherToFillIn: false },
    { name: '教育背景', whetherToFillIn: false },
    { name: '求职期望', whetherToFillIn: false },
    { name: '项目经验', whetherToFillIn: false },
    { name: '技能专长', whetherToFillIn: false },
    { name: '实习经历', whetherToFillIn: false },
    { name: '获奖情况', whetherToFillIn: false },
    { name: '实践经验', whetherToFillIn: false },
    { name: '所获证书', whetherToFillIn: false },
    { name: '自我评价', whetherToFillIn: false }
];
// endregion
// region TODO 预览简历目录
const previewCatalog = [
    { name: '个人信息', whetherToFillIn: true },
    { name: '联系方式', whetherToFillIn: true },
    { name: '教育背景', whetherToFillIn: true },
    { name: '求职期望', whetherToFillIn: true },
    { name: '项目经验', whetherToFillIn: true },
    { name: '技能专长', whetherToFillIn: true },
    { name: '实习经历', whetherToFillIn: true },
    { name: '获奖情况', whetherToFillIn: true },
    { name: '实践经验', whetherToFillIn: true },
    { name: '所获证书', whetherToFillIn: true },
    { name: '自我评价', whetherToFillIn: true }
];
// endregion
export default {
    components: { Hearder },
    data() {
        return {
            loading: false,
            id: '',
            showCatalog: false, //显示目录
            resumeCatalog,
            previewCatalog,
            printStatus,
            messageStatus,
            selfAssessment,
            receivedCertificate,
            practicalExperience,
            scholarshipAndPrize,
            internshipExperience,
            dateOptions_day: {
                disabledDate(date) {
                    var dateNow = new Date();
                    return date && date.valueOf() > dateNow.setMonth(dateNow.getMonth());
                }
            },
            baseMes: {
                name: '郭冬临', //姓名
                age: '18', //年龄
                theyear: '2023应届', //应届和往届
                school: '河南财金政法大学', //学校
                schoolId: '', //学校id
                birthDate: '2001.09', //出生日期
                nation: '汉族', //民族
                education: '本科', //学历
                speciality: '金融管理', //专业
                place: '河南 周口', //籍贯
                city: '郑州', //城市
                politicalOutlook: '中共预备党员', //政治面貌
                phone: '12345678910', //手机号
                email: '123456@qq.com', //邮箱
                sex: '男', //性别
                edBackA: '2020.03 - 2023.06    河南财经政法大学 ', //教育背景
                edBackB: '', //教育背景
                edBackC: '', //教育背景
                workPlace: '浙江杭州', //工作地区
                engagedIndustry: '证券/基金/期货', //从事行业
                positionHeld: '行政/后勤类', //担任职位
                workType: '全职', //工作类型
                salaryRangeMax: '10', //薪资范围 最多
                salaryRangeMin: '8', //薪资范围 最少
                onDate: '一周内', //到岗时间
                projectExep: '项目经验', //项目经验
                skillExe: '1、精通软件： Photoshop、Dreamweaver、Illustrator、Fash、Axure；', //技能专长
                internshipExep: '实习经历', //实习经历
                practicalExep: '实践经验', //实践经验
                selfEvalua: '自我评价', //自我评价
                certifiCation: '证书1', //所获证书
                awardSss: '获奖1', //获奖情况
                createBy: '', //创建者
                createTime: '', //创建时间
                delFlag: 0, //删除标志 默认0
                delivered: 0, //已投递
                id: '', //唯一标识
                integrity: '', //简历完整度
                interested: 0, //感兴趣
                interviewInvitation: 0, //面试邀请
                isHideBio: '', //是否隐藏
                jobStatus: '', //求职状态
                statusJob: '', //求职状态
                suitable: '', //合适 不合适
                updateBy: '', //更新者
                updateTime: '', //更新时间
                viewed: 0 //被查看
            },
            projectExperience,
            jobExpectationForm,
            jobExpectationRules,
            basicInformationForm,
            basicInformationFormRules,
            posMes: [], //职位信息
            industryMes: [] //行业信息
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        console.log(this.id, 'id');
        document.body.style.overflow = 'unset';
        document.body.style.height = 'fit-content';

        this.postMymes();
    },
    destroyed() {
        document.body.style.overflow = 'hidden';
        document.body.style.height = '100%';
    },
    watch: {
        messageStatus(ov, nv) {
            if (nv === 1) {
                this.$refs.basicInformationRef.resetFields();
            } else if (nv === 2) {
                //恢复初始状态
                this.$refs.jobExpectationRef.resetFields();
            } else {
                this.projectExperience = '';
                this.internshipExperience = '';
                this.scholarshipAndPrize = '';
                this.practicalExperience = '';
                this.receivedCertificate = '';
                this.selfAssessment = '';
            }
        }
    },
    methods: {
        // region TODO 编辑信息
        showModel(status) {
            this.$nextTick(() => {
                this.messageStatus = status;
            });
        },
        // endregion
        // region TODO 获取简历信息
        postMymes: function () {
            this.loading = true;
            const item = {
                bid: ''
            };
            item.bid = this.id;
            this.postRequest('/recommed/getInfoByBid', item)
                .then(res => {
                    if (res.success) {
                        this.baseMes = res?.result || []
                        this.loading = false;
                        console.log(res, '简历信息');
                        this.updateResumeCatalog(); //更新目录
                        this.updatePreviewCatalog(); //更新简历
                    }
                })
                .catch(err => {
                    this.loading = false;
                });
        },
        // 更新预览目录，根据 baseMes 中的字段值来决定是否填充 previewCatalog 中的对应项
        updatePreviewCatalog: function () {
            const fields = ['name', ['phone', 'email'], 'school', 'onDate', 'projectExep', 'skillExe', 'internshipExep', 'awardSss', 'practicalExep', 'certifiCation', 'selfEvalua'];
            fields.forEach((field, index) => {
                this.previewCatalog[index].whetherToFillIn = Array.isArray(field) ? field.some(f => this.checkNotEmpty(this.baseMes[f])) : this.checkNotEmpty(this.baseMes[field]);
            });
        },
        // 更新简历目录，根据 baseMes 中的字段值来决定是否填充 resumeCatalog 中的对应项
        updateResumeCatalog: function () {
            const fields = ['name', ['phone', 'email'], 'school', 'onDate', 'projectExep', 'skillExe', 'internshipExep', 'awardSss', 'practicalExep', 'certifiCation', 'selfEvalua'];
            fields.forEach((field, index) => {
                this.resumeCatalog[index].whetherToFillIn = Array.isArray(field) ? field.some(f => this.checkNotEmpty(this.baseMes[f])) : this.checkNotEmpty(this.baseMes[field]);
            });
        },
        // 检查值是否非空
        checkNotEmpty: function (value) {
            return Boolean(value);
        },
        // endregion

        // region TODO 打印
        putASealOn() {
            this.$router.push({ name: 'PrintResume' });

            // document.querySelector('.main-header-content').style.display = 'none'
            // document.querySelector('.sidebar-menu-content').style.display = 'none'
            // document.querySelector('.single-page-content').style.left = '0'
            // document.querySelector('.single-page-content').style.top = '0'
            // this.$nextTick(() => {
            //   setTimeout(() => {
            //     this.printStatus = true
            //     document.querySelector('.sidebar-menu-content').style.display = 'block'
            //     document.querySelector('.main-header-content').style.display = 'block'
            //     document.querySelector('.single-page-content').style.left = '220px'
            //     document.querySelector('.single-page-content').style.top = '60px'
            //   }, 1000)
            //   window.print()
            // })
        }
        // main-header shrinkable-menu
        // endregion
    }
};
</script>

<style scoped lang="less">
.imageIcon{
    width: 130px;
    height: 170px;
}
/*头像*/
.info-base-avatar {
    width: 130px;
    height: 170px;
    border-radius: 5px;
}
.resume-catalog {
    width: 100%;
    height: 60px;
    background-image: url('../images/resumeCatalog.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.step-stick-active {
    font-size: 14px;
    color: #333;
    padding: 16px 0;
    position: relative;
    --active-steps: #ababab;

    &.is-active {
        --active-steps: #0087fa;
    }

    //height: 35px;
    //line-height: 35px;
    &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid var(--active-steps);
    }

    & + .step-stick-active {
        &::after {
            content: '';
            display: inline-block;
            left: 3px;
            position: absolute;
            top: calc(-50% + 4px);
            width: 2px;
            height: calc(100% - 8px);
            background: #eeeeee;
        }
    }
}

.label-title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e8edf4;
    border-top: 1px solid #e8edf4;
    line-height: 50px;
    margin-bottom: 12px;

    .title {
        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #0087fa;
            margin-right: 20px;
        }
    }
}
.w_100-250p{
    width: calc(100% - 250px);
}
.w-250{
    width: 250px;
}
</style>
